<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>简单拖放 demo</title>
<style>

    .container {
        border: 1px solid red;
        height: 450px;
        padding: 10px;
        position: relative;
    }

    .component {
        margin: 50px 10px;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid black;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        overflow: hidden;
    }

    .cheader {
        cursor: move;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
    }

    #drop, #drop3 {
        border: 1px solid green;
        height: 130px;
        line-height: 100px;
    }

    .ks-dd-drag-over {
        background: #a52a2a;
    }

    .ks-dd-drop-over {
        background: #fa8072;
    }

    #container3 .component .cheader {
        cursor: move;
    }
</style>
</head>
<body>

<h2>简单拖放</h2>
<div id="container" class="container">

    <div id="c1" class="component">

        intersect drag
    </div>

    <div id="c2" class="component">

        point drag
    </div>

    <div id="c3" class="component" style="width:250px;line-height: 1;height: 110px;">
        strict drag with proxy
        <img height="100"
                src="http://img.alimama.cn/adbrand/adboard/picture/2011-09-20/126792650001110920134440.jpg"/>
    </div>


    <div id="drop">
        drop zone
    </div>
</div>

<script src="../../../build/kissy.js"></script>

<script src="../ddm.js"></script>
<script src="../draggable.js"></script>
<script src="../droppable.js"></script>
<script src="../proxy.js"></script>
<script src="../draggable-delegate.js"></script>
<script src="../droppable-delegate.js"></script>
<script src="../scroll.js"></script>
<script src="../../dd.js"></script>
<script>

    var S = KISSY;

    KISSY.use("node,dd", function(S, Node, DD) {
        var DDM = DD.DDM,
                DraggableDelegate = DD.DraggableDelegate,
                Draggable = DD.Draggable,
                Droppable = DD.Droppable,
                Proxy = DD.Proxy;

        /**
         * 简单拖放
         */
        S.ready(function(S) {
            var p = new Proxy({
                /**
                 * 如何产生替代节点
                 * @param drag 当前拖对象
                 */
                node:function(drag) {
                    var n = S.one(drag.get("dragNode").clone(true));
                    n.attr("id", S.guid("ks-dd-proxy"));
                    n.css("opacity", 0.2);
                    return n;
                }
            });
            var c1 = new Draggable({
                node:"#c1",
                move:1,
                //模式，
                // intersect :区域相交就算enter
                // strict : drag 区域完全在 drop 区域内才算
                // point : 鼠标在 drop 区域内
                //默认 point
                mode:Draggable.INTERSECT
            });


            var c3 = new Draggable({
                node:"#c3",
                move:1,
                mode:Draggable.STRICT
            });


            p.attach(c3);

            var c2 = new Draggable({
                node:"#c2",
                move:1
            });


            var drop = new Droppable({
                node:"#drop"
            });

            c1.on("dragenter", function(ev) {

                S.log(ev.drag.get("node").attr("id") + " dragenter "
                        + ev.drop.get("node").attr("id"));
            });

            c1.on("dragover", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dragover "
                        + ev.drop.get("node").attr("id"));
            });

            c1.on("dragexit", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dragexit "
                        + ev.drop.get("node").attr("id"));
            });

            function onhit(ev) {
                ev.drag.get("node").css("margin", "5px 10px");
                ev.drag.get("node").appendTo(ev.drop.get("node"));
                ev.drag.destroy();
            }

            c1.on("dragdropmiss", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dragdropmiss ");
            });


            drop.on("dropenter", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dropenter "
                        + ev.drop.get("node").attr("id"));
            });

            drop.on("dropover", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dropover "
                        + ev.drop.get("node").attr("id"));
            });

            drop.on("dropexit", function(ev) {
                S.log(ev.drag.get("node").attr("id") + " dropexit "
                        + ev.drop.get("node").attr("id"));
            });

            drop.on("drophit", onhit);

        });
    });


</script>
</body>
</html>